3
if(JSON.parse(localStorage.getItem('singer'))==undefined){
    //console.log("aa")
    let aa=[]
    localStorage.setItem('singer',JSON.stringify(aa))
}
let arr=JSON.parse(localStorage.getItem('singer'))
let inp_search;
hanshu()
// 渲染搜索记录
function hanshu(){

    //let singer=JSON.parse(localStorage.getItem('singer'))
    // if(singer!=""){
    
        string=''
        arr.forEach((value,index,arrs) => {
            string+=
            `
            <li onclick='search_music("${value}")' ><div class="u-svg-histy"></div>${value}<span   onclick='del("${index}","${value}")'>X</span>  </li>

            `
        });
        
        $(".content").innerHTML=
        `
        <div class="hotsearch">
                            
        </div>
        <div class="storage">
            <ul id="ul">
                ${string}
            </ul>
        </div>
        `
        hotsearch()
    // }    
}

function del(index,value){
    arr.splice(index,1)
    //splice(从哪儿，删几个，改成什么)
    localStorage.clear()
    localStorage.setItem('singer',JSON.stringify(arr))   
    hanshu()
}

$("#search").onfocus=function(){
    this.addEventListener('keyup',addLocalStorage)
}
function addLocalStorage(event){
    //console.log(event.keyCode)
    if(event.keyCode==13){
        arr=JSON.parse(localStorage.getItem('singer'))||[]
        arr.unshift($("#search").value)
        localStorage.setItem('singer',JSON.stringify(arr))

        // inp_search="\"" + $("#search").value + "\""
        inp_search= $("#search").value
        search_music(inp_search)


        // hanshu()

    }else if($("#search").value!='' && $("#search").value!=null && $("#search").value!=undefined){
        let keyword=$("#search").value

        fetch(`http://101.200.226.244:3000/search/suggest?keywords=${keyword}&type=mobile`,{
            method:"get",
            mode:"cors" ,
            
        }).then(function(r){
            return r.json()
         }).then(function(data){
             let string=''
           data.result.allMatch.forEach(element => {
               //console.log(element)
               string+=
               `
               <li onclick='search_music("${element.keyword}")' ><span>${element.keyword}</span></li>
               `
               
           });
             $(".content").innerHTML=`<ul>${string}</ul>`
         })
    }else{
        hanshu()
    }
}


function hotsearch(){
    //热搜索
    fetch("http://101.200.226.244:3000/search/hot",{
        method:"get",
        mode:"cors" 
    }).then(function(r){
        return r.json()
    }).then(function(data){
        //console.log(data.result.hots)
        let string="";
        data.result.hots.forEach(value => {
            // console.log(value.first)
            string+=
            `
            <span>${value.first}</span>
            `
        });
        //console.log(string)
        $(".hotsearch").innerHTML=string;
    })
}

function search_music(inp_search){
    fetch(`http://101.200.226.244:3000/search?keywords=${inp_search}`,{
            method:"get",
            mode:"cors" 
        }).then(function(r){
            return r.json()
        }).then(function(data){
            console.log(data)

            let string=""
            data.result.songs.forEach(function(value){
                console.log(value)
            string+=
        
        
            `
            <a href="playsong.html?ids=${value.id}"> 
                <li>
                <h4>${value.name}</h4>
                <p>${value.artists[0].name} - ${value.album.name}</p>
                </li> 
            </a>
            `
            })
            $(".content").innerHTML=`<div class="new_song"><ul>${string}</ul><div>`
        })
}


$("#a1").onclick = function () {
    $("#a").style.color = "black";
    $("#a").style.borderBottom="none";
}
$("#a2").onclick = function () {
    $("#a").style.color = "black";
    $("#a").style.borderBottom="none";
}
$("#a").onclick = function () {
    // $("#a").style.visibility="visible";
    // $("#a").style.color = "red";
    $("#a").style.borderBottom="2.5px solid red" ;
}
